<template>
  <div class="rent" ref="rent">
    <header>
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span>房屋管理</span>
      <span></span>
    </header>
    <main>
      <div class="main_houselist">
        <dl
          v-for="v in list"
          :key="v.houseCode"
          @click="$router.push(`/details/${v.houseCode}`)"
        >
          <dt>
            <img :src="'http://47.102.145.189:8009' + v.houseImg" alt="" />
          </dt>
          <dd>
            <h3>{{ v.title }}</h3>
            <p>{{ v.desc }}</p>
            <p v-for="(item, index) in v.tags" :key="index">
              <span>{{ item }}</span>
            </p>
            <p>{{ v.price }}元/月</p>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getList() {
      this.$http
        .get("/houses", {
          params: {
            start: 1,
            end: 100,
          },
        })
        .then((res) => {
          if (res.data.status === 200) {
            this.list = res.data.body.list;
          }
          console.log(this.list)
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.rent {
  width: 100%;
  height: 100%;
}
.rent header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 16px;
  background: #f6f5f6;
}
.main_houselist {
  width: 100%;
  height: auto;
}
.main_houselist dl {
  width: 100%;
  padding: 5px 10px;
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}
.main_houselist dl dt {
  flex-shrink: 0;
  width: 120px;
  height: 100px;
  margin-right: 10px;
}
.main_houselist dl dt img {
  width: 100%;
  height: 100%;
}
.main_houselist dl dd {
  line-height: 28px;
}
.main_houselist dl dd h3 {
  font-size: 15px;
  color: #394043;
}
.main_houselist dl dd p:nth-child(2) {
  font-size: 12px;
  color: #afb2b3;
}
.main_houselist dl dd p:nth-child(3) {
  display: flex;
}
.main_houselist dl dd p:nth-child(4) {
  color: #fa5741;
  font-size: 12px;
}
.main_houselist dl dd p:nth-child(3) span {
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
  background: #39becd;
  color: #e1f5f8;
}
</style>